<template>
  <div class="filter-container">

    <template v-if="columns.length !== 0">
      <el-button
        style="float: right;  margin-left: 10px"
        class="filter-item"
        type="default"
        icon="el-icon-refresh"
        @click="handleClear"
      />
      <el-button
        style="float: right"
        class="filter-item"
        icon="el-icon-search"
        @click="handeSeach"
      />
      <template v-for="(column, index) in columns">
        <el-date-picker
          v-if="column.type==='Date'"
          :key="index"
          v-model="filterData[column.field]"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          :start-placeholder="column.pre + '开始时间'"
          :end-placeholder="column.pre + '结束时间'"
          style="width: 300px; float: right"
          class="filter-item"
        />
        <el-input
          v-else
          :key="index"
          v-model="filterData[column.field]"
          :placeholder="column.pre"
          :disabled="column.disabled"
          style="width: 200px; float: right"
          class="filter-item"
          @keyup.enter.native="handleFilter"
          @change="onChange"
        />
      </template>

    </template>

    <template v-if="tools.length !== 0">
      <template v-for="(column, index) in tools">

        <slot v-if="column.slot" :name="column.slot" />

      </template>
    </template>

  </div>
</template>
<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []

    },
    options: {
      type: Object,
      default: function() {
        return {}
      }
    },
    tools: {
      type: Array,
      default: () => []
    },
    filterData: {
      type: Object,
      default: () => {}
    }
  },
  // data() {
  //   return {
  //     filterData: {

  //     }
  //   }
  // },
  // created() {
  //   this.columns.map(item => {
  //     this.$set(this.filterData, item.field, item.value || '')
  //   })
  // },
  methods: {
    handleFilter() {
    },
    handleClear() {
      this.$emit('handleClear')
    },
    handeSeach() {
      this.$emit('handeSeach')
    },
    onChange() {
      this.$emit('onChange')
    }
  }
}

</script>
